<template>
  <div style="height: 100%">
    <!-- 操作 -->
    <div class="option">
      <v-navigation-drawer style="height: 100%" permanent>
        <v-list-item>
          <v-list-item-content>
            <v-btn depressed> <v-icon>mdi-tag-plus-outline</v-icon>新建分类 </v-btn>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list dense nav>
          <v-list-item
            v-for="(item, index) in categoryList"
            :key="index"
            @click="setIndex(index)"
            :class="selectIndex === index ? 'select' : ''"
            link
          >
            <v-list-item-icon>
              <v-icon>{{
                ["mdi-gitlab", "mdi-github", "mdi-git", "mdi-vuejs", "mdi-vuetify"][
                  Math.floor(Math.random() * 5)
                ]
              }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ item.cateName }}</v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon v-if="selectIndex === index">
              <v-menu offset-y>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon v-bind="attrs" v-on="on">mdi-buddhism</v-icon>
                </template>
                <v-list dense nav>
                  <v-list-item link>
                    <v-list-item-title
                      ><v-icon small>mdi-comment-edit-outline</v-icon
                      >修改分类</v-list-item-title
                    >
                  </v-list-item>
                  <v-list-item link @click="delClass(item)">
                    <v-list-item-title
                      ><v-icon small>mdi-delete-forever-outline</v-icon
                      >删除分类</v-list-item-title
                    >
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-list-item-icon>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-navigation-drawer style="width: 350px; height: 100%" permanent>
        <v-list-item>
          <v-list-item-content>
            <v-btn depressed @click="add">
              <v-icon>mdi-tag-plus-outline</v-icon>新博文
            </v-btn>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list style="overflow: auto; height: 780px">
          <v-list-item
            v-for="(item, index) in list"
            :key="index"
            @click="setIndex2(index)"
            :class="selectIndex2 === index ? 'select' : ''"
            link
          >
            <v-list-item-icon>
              <v-icon
                :class="item.state === 'RELEASE' ? 'accent--text' : 'secondary--text'"
                >{{
                  item.state === "RELEASE"
                    ? "mdi-checkbox-marked-circle"
                    : "mdi-minus-circle"
                }}</v-icon
              >
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon v-if="selectIndex2 === index">
              <v-menu v-model="isMenu" offset-y>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon v-bind="attrs" v-on="on">mdi-buddhism</v-icon>
                </template>
                <v-list dense nav>
                  <v-list-item
                    link
                    v-if="item.state === 'DRAFT'"
                    @click="release(item.articleId)"
                  >
                    <v-list-item-title
                      ><v-icon small>mdi-telegram</v-icon>发布博文</v-list-item-title
                    >
                  </v-list-item>
                  <v-list-item link>
                    <v-list-item-title
                      ><v-icon small>mdi-folder-image</v-icon
                      >设置封面图</v-list-item-title
                    >
                  </v-list-item>
                  <v-menu open-on-hover offset-x transition="scale-transition">
                    <template v-slot:activator="{ on, attrs }">
                      <v-list-item v-bind="attrs" v-on="on" link>
                        <v-list-item-title
                          ><v-icon small>mdi-folder-open-outline</v-icon
                          >移动博文</v-list-item-title
                        >
                        <v-icon style="">mdi-menu-right</v-icon>
                      </v-list-item>
                    </template>
                    <v-list dense nav>
                      <v-list-item
                        @click="
                          isMenu = false;
                          CCate(item.cateId);
                        "
                        link
                        v-for="(item, index) in categoryList.filter(
                          (e, idx) => idx != selectIndex
                        )"
                        :key="index"
                      >
                        <v-list-item-title>{{ item.cateName }}</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                  <v-menu offset-x transition="scale-transition">
                    <template v-slot:activator="{ on, attrs }">
                      <v-list-item v-bind="attrs" v-on="on" link>
                        <v-list-item-title
                          ><v-icon small>mdi-clipboard-edit-outline</v-icon
                          >贴标签</v-list-item-title
                        >
                        <v-icon style="">mdi-menu-right</v-icon>
                      </v-list-item>
                    </template>
                    <v-list style="height: 500px; width: 270px" dense>
                      <v-list-item
                        style="background: white"
                        @click.stop="CTag(item)"
                        link
                        v-for="(item, index) in tagsList"
                        :key="index"
                      >
                        <v-list-item-icon>
                          <v-icon
                            v-if="
                              list[selectIndex2].tags.findIndex(
                                (e) => e.tagId === item.tagId
                              ) !== -1
                            "
                            class="accent--text"
                            >mdi-checkbox-marked-circle</v-icon
                          >
                        </v-list-item-icon>
                        <v-list-item-title>{{ item.tagName }}</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                  <v-list-item link @click="delArticle(item.articleId)">
                    <v-list-item-title
                      ><v-icon small>mdi-delete-forever-outline</v-icon
                      >删除博文</v-list-item-title
                    >
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-list-item-icon>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </div>
  </div>
</template>

<script>
import { articleList, articleSave, articleAdd } from "@/api/article/article";
import { categoryList } from "@/api/article/category";
import { tagList, tagStick } from "@/api/article/tag";
export default {
  data() {
    return {
      list: [],
      selectIndex: 0,
      selectIndex2: 0,
      cateTag: false,
      tagsList: [],
      tagValue: [],
      categoryList: [],
      categoryValue: [],
      isMenu: false,
      items: [
        { title: "Dashboard", icon: "mdi-view-dashboard" },
        { title: "Photos", icon: "mdi-image" },
        { title: "About", icon: "mdi-help-box" },
      ],
      right: null,
    };
  },
  created() {
    this.sendApis();
  },
  methods: {
    async sendApis() {
      this.categoryList = await categoryList();
      this.getArticleList();
      this.getTagsList();
    },
    /**
     * 获取文章列表
     */
    getArticleList() {
      articleList({
        state: "RD",
        cateId:
          this.categoryList.length > 0
            ? this.categoryList[this.selectIndex].cateId
            : undefined,
      }).then((data) => {
        this.list = data;
        this.updateCommotData(0);
      });
    },
    /**
     * 获取标签集合
     */
    getTagsList() {
      tagList().then((data) => {
        this.tagsList = data;
      });
    },
    /**
     * 贴标签
     */
    CTag(item) {
      let articleId = this.list[this.selectIndex2].articleId;
      let fIndex = this.list[this.selectIndex2].tags.findIndex(
        (e) => e.tagId === item.tagId
      );
      if (fIndex !== -1) {
        this.list[this.selectIndex2].tags.splice(fIndex, 1);
      } else {
        this.list[this.selectIndex2].tags.push(item);
      }
      tagStick({
        articleId,
        tagNames: this.list[this.selectIndex2].tags.map((e) => e.tagName).join(","),
      }).then(() => {
        this.$notify({
          title: "提示",
          type: "success",
          message: "操作成功",
          duration: 500,
        });
      });
    },
    /**
     * 选择分类
     */
    CCate(cateId) {
      articleSave({
        articleId: this.list[this.selectIndex2].articleId,
        cateId,
      }).then(() => {
        this.getArticleList();
        this.$notify({
          title: "提示",
          message: "博文已移动至新分类",
          type: "success",
          duration: 1500,
        });
      });
    },
    // 点击其他文章
    setIndex(index) {
      this.selectIndex = index;
      this.getArticleList();
    },
    // 点击其他文章
    setIndex2(index) {
      this.selectIndex2 = index;
      // 更换标题和内容显示
      this.updateCommotData(index);
    },
    // 添加
    add() {
      articleAdd({
        context: " ",
        cateId: this.categoryList[this.selectIndex].cateId,
      }).then(() => {
        this.selectIndex2 = 0;
        this.getArticleList();
      });
      // this.$http.post("/article/add", { context: " ", cateId: this.categoryList[this.selectIndex].id}).then(() => {
      //   this.selectIndex = 0;
      //   this.getArticleList();
      // });
    },
    // 删除博文
    delArticle(id) {
      this.$confirm("确定删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        articleSave({
          articleId: id,
          state: "RECOVERY",
        }).then(() => {
          this.list.splice(this.selectIndex2, 1);
          this.selectIndex2 = 0;
          this.$notify.success({
            title: "提示",
            message: "删除成功",
            duration: 800,
          });
        });
      });
    },
    // 发布博文
    release(id) {
      articleSave({
        articleId: id,
        state: "RELEASE",
      }).then(() => {
        this.list[this.selectIndex2].state = "RELEASE";
        this.$notify.success({
          title: "提示",
          message: "操作成功",
          duration: 800,
        });
      });
    },
    //更新基础数据
    updateCommotData(index) {
      this.title = this.selectIndex2 = index;
      this.title = this.list[index].title;
      this.context = this.list[index].context;
      this.$emit("change", this.list[index]);

      this.tagValue = [];
      this.list[index].tags.forEach((element) => {
        this.tagValue.push(element.tagName);
      });
      this.categoryValue = [];
      if (this.list[index].cateName != null) {
        this.categoryValue = [this.list[index].cateName];
      }
    },
  },
};
</script>

<style scoped>
.option {
  display: flex;
  height: 100%;
}
</style>
